<template>
	<view class="content">
		<view class="back">
			<m-icon type="arrowleft" size="28" class="btn-icon" @click="back()"></m-icon>
		</view>
		
		<view class="list">
			<view class="li li1">
				<view class="li-btn2">{{i18n.user.revenue}}</view>
				<view class="li-btn3">{{i18n.user.earnings}}</view>
			</view>
			
			<view style="height: 90upx;"></view>
			
			<view class="li" v-for="(li, id) in list" :key="id">
				<view class="li-btn2">{{li.typename}}
				</view>
				<view class="li-btn3">{{li.income}}</view>
				<view class="li-time">{{li.createtime}}</view>
			</view>
			
			<view style="height: 2upx;"></view>
			
			<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import mIcon from '../../components/m-icon/m-icon.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	import service from '../../service.js';
	export default {
		computed: {
			i18n () {
				return this.$t('index')
			}
		},
		components: {
			uniLoadMore,
			mIcon
		},
		data() {
			return {
				loadingType: 0,
				contentText: [],
				list:[],
				pages:1,
				page:0,
			};
		},
		onShow: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.pages.earning
			});
			this.contentText = {
				contentdown: this.i18n.setting.down,
				contentrefresh: this.i18n.setting.refresh,
				contentnomore: this.i18n.setting.nomore
			}
			this.loadHistory();
		},
		onReachBottom() {
			this.loadHistory();
		},
		methods: {
			back() {
				uni.reLaunch({
					url: uni.getStorageSync("url")
				});
			},
			loadHistory(){
				if(this.isHistoryLoading){
					return ;
				}
				if(this.page < this.pages){
					this.loadingType = 1;
					var keywords = this.keywords;
					this.isHistoryLoading = true;//参数作为进入请求标识，防止重复请求
					this.scrollAnimation = false;//关闭滑动动画
					//本地模拟请求历史记录效果
					var page = this.page+1;
					service.auth(this, service.api.user.earning+"?token="+this.token, {page:page}, function(self, res) {
						if (res.code == 1) {
							var list = res.data.loglist.data;
							for(let i=0;i<list.length;i++){
								//将数据逐条写入数组
								self.list.push(list[i]);
							}
							self.pages = res.data.loglist.last_page;
							self.page = page;
							self.scrollAnimation = true;//恢复滚动动画
							self.isHistoryLoading = false;
							if(self.page == self.pages || res.data.loglist.total == 0){
								self.loadingType = 2;
							}else{
								self.loadingType = 0;
							}
						}
					});
				}else{
					this.loadingType = 2;
				}
			}
		}
	};
</script>

<style>
	page{
		background: #F2F2F2;
	}
	.list{
		margin: -20upx;
	}
	.li{
		font-size: 32upx;
		height: 120upx;
		line-height: 90upx;
		text-align: center;
		background: #FFFFFF;
		border-bottom: 2upx solid #CCCCCC;
	}
	.li-time{
		width: 100%;
		line-height: 40upx;
		text-align: left;
		text-indent: 30upx;
		color: #BBBBBB;
		font-size: 28upx;
	}
	.li-btn1,.li-btn2,.li-btn3,.li-btn4{
		/* width: 33%; */
		width: 65%;
		float: left;
		height: 80upx;
		text-align: left;
		text-indent: 30upx;
		line-height: 80upx;
		border-bottom:2upx solid #EEEEEE;
	}
	.li-btn3{
		width: 35%;
		text-indent: 0;
		text-align: center;
	}
	.li1{
		width: 100%;
		position: fixed;
		height: 84upx;
	}
	.li1 view{
		border-bottom:0upx solid #CCCCCC;
	}
	.li-button{
		width: 70%;
		color: #FFFFFF;
		font-size: 28upx;
		margin: 10upx 15%;
		line-height: 60upx;
		background: #37BAC9;
		border-radius: 30upx;
	}
</style>
